<!DOCTYPE html>

<html lang="en">


<head>


    <!-- Basic -->

    <meta charset="UTF-8"/>


    <title>Buttons | Nadhif - Responsive Admin Template</title>


    <!-- Mobile Metas -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


    <!-- Favicon and touch icons -->

    <link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/>

    <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"/>

    <link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/>

    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/>

    <link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/>

    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/>

    <link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/>

    <link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/>

    <link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/>


    <!-- start: CSS file-->


    <!-- Vendor CSS-->

    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="assets/vendor/skycons/css/skycons.css" rel="stylesheet"/>

    <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>


    <!-- Plugins CSS-->

    <link href="assets/plugins/bootkit/css/bootkit.css" rel="stylesheet"/>

    <link href="assets/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet"/>

    <link href="assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet"/>


    <!-- Theme CSS -->

    <link href="assets/css/jquery.mmenu.css" rel="stylesheet"/>


    <!-- Page CSS -->

    <link href="assets/css/style.css" rel="stylesheet"/>

    <link href="assets/css/add-ons.min.css" rel="stylesheet"/>
    <style>
        .index1 {
            border: 1px dashed black;
            text-align: center;
            border-radius: 50px;
            height: 20px;
            width: 20px;
            padding-top: 5px;
        }
    </style>

    <!-- end: CSS file-->


    <!-- Head Libs -->

    <script src="assets/plugins/modernizr/js/modernizr.js"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->


</head>


<body>


<!-- Start: Header -->

<div class="navbar" role="navigation">

    <div class="container-fluid container-nav">

        <!-- Navbar Action -->

        <ul class="nav navbar-nav navbar-actions navbar-left">

            <li class="visible-md visible-lg"><a href="ui-buttons.html#" id="main-menu-toggle"><i
                    class="fa fa-th-large"></i></a></li>

            <li class="visible-xs visible-sm"><a href="ui-buttons.html#" id="sidebar-menu"><i class="fa fa-navicon"></i></a>
            </li>

        </ul>

        <!-- Navbar Left -->

        <div class="navbar-left">

            <!-- Search Form -->

            <form class="search navbar-form">

                <div class="input-group input-search">

                    <input type="text" class="form-control" name="q" id="q" placeholder="Search...">

                    <span class="input-group-btn">

								<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>

							</span>

                </div>

            </form>

        </div>

        <!-- Navbar Right -->

        <div class="navbar-right">

            <!-- Notifications -->

            <ul class="notifications hidden-sm hidden-xs">

                <li>

                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">

                        <i class="fa fa-tasks"></i>

                        <span class="badge">10</span>

                    </a>

                    <ul class="dropdown-menu update-menu" role="menu">

                        <li><a href="#"><i class="fa fa-database bk-fg-primary"></i> Database </a></li>

                        <li><a href="#"><i class="fa fa-bar-chart-o bk-fg-primary"></i> Connection </a></li>

                        <li><a href="#"><i class="fa fa-bell bk-fg-primary"></i> Notification </a></li>

                        <li><a href="#"><i class="fa fa-envelope bk-fg-primary"></i> Message </a></li>

                        <li><a href="#"><i class="fa fa-flash bk-fg-primary"></i> Traffic </a></li>

                        <li><a href="#"><i class="fa fa-credit-card bk-fg-primary"></i> Invoices </a></li>

                        <li><a href="#"><i class="fa fa-dollar bk-fg-primary"></i> Finances </a></li>

                        <li><a href="#"><i class="fa fa-thumbs-o-up bk-fg-primary"></i> Orders </a></li>

                        <li><a href="#"><i class="fa fa-folder bk-fg-primary"></i> Directories </a></li>

                        <li><a href="#"><i class="fa fa-users bk-fg-primary"></i> Users </a></li>

                    </ul>

                </li>

                <li>

                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">

                        <i class="fa fa-envelope"></i>

                        <span class="badge">5</span>

                    </a>

                    <ul class="dropdown-menu">

                        <li class="dropdown-menu-header">

                            <strong>Messages</strong>

                            <div class="progress progress-xs  progress-striped active">

                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

                                    60%

                                </div>

                            </div>

                        </li>

                        <li class="avatar">

                            <a href="page-inbox.html">

                                <img class="avatar" src="assets/img/avatar1.jpg" alt=""/>

                                <div>
                                    <div class="point point-primary point-lg"></div>
                                    New message
                                </div>

                                <span><small>1 minute ago</small></span>

                            </a>

                        </li>

                        <li class="avatar">

                            <a href="page-inbox.html">

                                <img class="avatar" src="assets/img/avatar2.jpg" alt=""/>

                                <div>
                                    <div class="point point-primary point-lg"></div>
                                    New message
                                </div>

                                <span><small>3 minute ago</small></span>

                            </a>

                        </li>

                        <li class="avatar">

                            <a href="page-inbox.html">

                                <img class="avatar" src="assets/img/avatar3.jpg" alt=""/>

                                <div>
                                    <div class="point point-primary point-lg"></div>
                                    New message
                                </div>

                                <span><small>4 minute ago</small></span>

                            </a>

                        </li>

                        <li class="avatar">

                            <a href="page-inbox.html">

                                <img class="avatar" src="assets/img/avatar4.jpg" alt=""/>

                                <div>
                                    <div class="point point-primary point-lg"></div>
                                    New message
                                </div>

                                <span><small>30 minute ago</small></span>

                            </a>

                        </li>

                        <li class="avatar">

                            <a href="page-inbox.html">

                                <img class="avatar" src="assets/img/avatar5.jpg" alt=""/>

                                <div>
                                    <div class="point point-primary point-lg"></div>
                                    New message
                                </div>

                                <span><small>1 hours ago</small></span>

                            </a>

                        </li>

                        <li class="dropdown-menu-footer text-center">

                            <a href="page-inbox.html">View all messages</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">

                        <i class="fa fa-bell"></i>

                        <span class="badge">3</span>

                    </a>

                    <ul class="dropdown-menu list-group">

                        <li class="dropdown-menu-header">

                            <strong>Notifications</strong>

                            <div class="progress progress-xs  progress-striped active">

                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

                                    60%

                                </div>

                            </div>

                        </li>

                        <li class="list-item">

                            <a href="page-inbox.html">

                                <div class="pull-left">

                                    <i class="fa fa-envelope-o bk-fg-primary"></i>

                                </div>

                                <div class="media-body clearfix">

                                    <div>Unread Message</div>

                                    <h6>You have 10 unread message</h6>

                                </div>

                            </a>

                        </li>

                        <li class="list-item">

                            <a href="#">

                                <div class="pull-left">

                                    <i class="fa fa-cogs bk-fg-primary"></i>

                                </div>

                                <div class="media-body clearfix">

                                    <div>New Settings</div>

                                    <h6>There are new settings available</h6>

                                </div>

                            </a>

                        </li>

                        <li class="list-item">

                            <a href="#">

                                <div class="pull-left">

                                    <i class="fa fa-fire bk-fg-primary"></i>

                                </div>

                                <div class="media-body clearfix">

                                    <div>Update</div>

                                    <h6>There are new updates available</h6>

                                </div>

                            </a>

                        </li>

                        <li class="list-item-last">

                            <a href="#">

                                <h6>Unread notifications</h6>

                                <span class="badge">15</span>

                            </a>

                        </li>

                    </ul>

                </li>

            </ul>

            <!-- End Notifications -->

            <!-- Userbox -->

            <div class="userbox">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                    <div class="profile-info">

                        <span class="name">John Smith Doe</span>

                        <span class="role">Developer</span>

                    </div>

                    <i class="fa custom-caret"></i>

                </a>

                <div class="dropdown-menu">

                    <ul class="list-unstyled">

                        <li class="dropdown-menu-header bk-bg-white bk-margin-top-15">

                            <div class="progress progress-xs  progress-striped active">

                                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

                                    60%

                                </div>

                            </div>

                        </li>

                        <li>

                            <a href="page-profile.html"><i class="fa fa-user"></i> Profile</a>

                        </li>

                        <li>

                            <a href="#"><i class="fa fa-wrench"></i> Settings</a>

                        </li>

                        <li>

                            <a href="page-invoice"><i class="fa fa-usd"></i> Payments</a>

                        </li>

                        <li>

                            <a href="#"><i class="fa fa-file"></i> File</a>

                        </li>

                        <li>

                            <a href="page-login.html"><i class="fa fa-power-off"></i> Logout</a>

                        </li>

                    </ul>

                </div>

            </div>

            <!-- End Userbox -->

        </div>

        <!-- End Navbar Right -->

    </div>

</div>

<!-- End: Header -->


<!-- Start: Content -->

<div class="container-fluid content">

    <div class="row">


        <!-- Sidebar -->

        <div class="sidebar">

            <div class="sidebar-collapse">

                <!-- Sidebar Header Logo-->

                <div class="sidebar-header">

                    <img src="assets/img/logo.png" class="img-responsive" alt=""/>

                </div>

                <!-- Sidebar Menu-->

                <div class="sidebar-menu">

                    <nav id="menu" class="nav-main" role="navigation">

                        <ul class="nav nav-sidebar">

                            <div class="panel-body text-center">

                                <div class="bk-avatar">

                                    <img src="assets/img/avatar.jpg" class="img-circle bk-img-60" alt=""/>

                                </div>

                                <div class="bk-padding-top-10">

                                    <i class="fa fa-circle text-success"></i> <small>Administrator</small>

                                </div>

                            </div>

                            <div class="divider2"></div>

                            <li>

                                <a href="index.html">

                                    <i class="fa fa-laptop" aria-hidden="true"></i><span>Dashboard</span>

                                </a>

                            </li>

                            <li>

                                <a href="page-inbox.html">

                                    <span class="pull-right label label-primary">165</span>

                                    <i class="fa fa-envelope" aria-hidden="true"></i><span>Mail</span>

                                </a>

                            </li>

                            <li class="nav-parent">

                                <a>

                                    <i class="fa fa-copy" aria-hidden="true"></i><span>Pages</span>

                                </a>

                                <ul class="nav nav-children">

                                    <li><a href="page-activity.html"><span class="text"> Activity</span></a></li>

                                    <li><a href="page-invoice.html"><span class="text"> Invoice</span></a></li>

                                    <li><a href="page-profile.html"><span class="text"> Profile</span></a></li>

                                    <li><a href="page-pricing-tables.html"><span class="text"> Pricing Tables</span></a>
                                    </li>

                                    <li><a href="page-404.html"><span class="text"> 404</span></a></li>

                                    <li><a href="page-500.html"><span class="text"> 500</span></a></li>

                                    <li><a href="page-lockscreen.html"><span class="text"> LockScreen1</span></a></li>

                                    <li><a href="page-lockscreen2.html"><span class="text"> LockScreen2</span></a></li>

                                    <li><a href="page-login.html"><span class="text"> Login Page</span></a></li>

                                    <li><a href="page-register.html"><span class="text"> Register Page</span></a></li>

                                </ul>

                            </li>

                            <li class="nav-parent">

                                <a>

                                    <i class="fa fa-list-alt" aria-hidden="true"></i><span>Forms</span>

                                </a>

                                <ul class="nav nav-children">

                                    <li><a href="form-elements.html"><span class="text"> Form elements</span></a></li>

                                    <li><a href="form-wizard.html"><span class="text"> Wizard</span></a></li>

                                    <li><a href="form-dropzone.html"><span class="text"> Dropzone Upload</span></a></li>

                                    <li><a href="form-x-editable.html"><span class="text"> X-editable</span></a></li>

                                    <li><a href="form-editors.html"><span class="text"> Editors</span></a></li>

                                </ul>

                            </li>

                            <li>

                                <a href="table.html">

                                    <i class="fa fa-table" aria-hidden="true"></i><span>Tables</span>

                                </a>

                            </li>

                            <li class="nav-parent">

                                <a>

                                    <i class="fa fa-random" aria-hidden="true"></i><span>Visual Chart</span>

                                </a>

                                <ul class="nav nav-children">

                                    <li><a href="chart-flot.html"><span class="text"> Flot Chart</span></a></li>

                                    <li><a href="chart-xchart.html"><span class="text"> xChart</span></a></li>

                                    <li><a href="chart-other.html"><span class="text"> Other</span></a></li>

                                </ul>

                            </li>

                            <li class="nav-parent nav-expanded active">

                                <a>

                                    <i class="fa fa-tasks" aria-hidden="true"></i>

                                    <span>UI Elements</span>

                                </a>

                                <ul class="nav nav-children">

                                    <li><a href="ui-progress-bars.html"><span class="text"> Progress bars</span></a>
                                    </li>

                                    <li><a href="ui-nestable-list.html"><span class="text"> Nestable Lists</span></a>
                                    </li>

                                    <li><a href="ui-elements.html"><span class="text"> Elements</span></a></li>

                                    <li><a href="ui-panels.html"><span class="text"> Panels</span></a></li>

                                    <li><a href="ui-buttons.html"><span class="text"> Buttons</span></a></li>

                                </ul>

                            </li>

                            <li>

                                <a href="widgets.html">

                                    <i class="fa fa-life-bouy" aria-hidden="true"></i><span>Widgets</span>

                                </a>

                            </li>

                            <li>

                                <a href="typography.html">

                                    <i class="fa fa-font" aria-hidden="true"></i><span>Typography</span>

                                </a>

                            </li>

                            <li class="nav-parent">

                                <a>

                                    <i class="fa fa-bolt" aria-hidden="true"></i><span>Icons</span>

                                </a>

                                <ul class="nav nav-children">

                                    <li><a href="icons-font-awesome.html"><span class="text"> Font Awesome</span></a>
                                    </li>

                                    <li><a href="icons-weathericons.html"><span class="text"> Weather Icons</span></a>
                                    </li>

                                    <li><a href="icons-glyphicons.html"><span class="text"> Glyphicons</span></a></li>

                                </ul>

                            </li>

                            <li>

                                <a href="gallery.html">

                                    <i class="fa fa-picture-o" aria-hidden="true"></i><span>Gallery</span>

                                </a>

                            </li>

                            <li>

                                <a href="calendar.html">

                                    <i class="fa fa-calendar" aria-hidden="true"></i><span>Calendar</span>

                                </a>

                            </li>

                        </ul>

                    </nav>

                </div>

                <!-- End Sidebar Menu-->

            </div>

            <!-- Sidebar Footer-->

            <div class="sidebar-footer">

                <ul class="sidebar-terms">

                    <li><a href="index.html#">Terms</a></li>

                    <li><a href="index.html#">Privacy</a></li>

                    <li><a href="index.html#">Help</a></li>

                    <li><a href="index.html#">About</a></li>

                </ul>

                <div class="copyright text-center">

                    <small>Nadhif <i class="fa fa-coffee"></i> Collect from <a href="http://www.cssmoban.com/"
                                                                               title="网页模板" target="_blank">网页模板</a> -
                        More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>

                </div>

            </div>

            <!-- End Sidebar Footer-->

        </div>

        <!-- End Sidebar -->


        <!-- Main Page -->

        <div class="main ">

            <!-- Page Header -->

            <div class="page-header">

                <div class="pull-left">

                    <ol class="breadcrumb visible-sm visible-md visible-lg">

                        <li><a href="index.html"><i class="icon fa fa-home"></i>Home</a></li>

                        <li><a href="#"><i class="fa fa-briefcase"></i>UI Features</a></li>

                        <li class="active"><i class="fa fa-th"></i>Buttons</li>

                    </ol>

                </div>

                <div class="pull-right">

                    <h2>Buttons</h2>

                </div>

            </div>

            <!-- End Page Header -->

            <div class="row">

                <div class="col-md-12">

                    <div class="panel bk-bg-white">

                        <div class="panel-heading">

                            <h6><i class="fa fa-th red"></i>Options</h6>

                        </div>

                        <div class="panel-body">
                            <div class="col-md-12 os-info">
                                <h6>操作系统信息</h6>
                                <div class="col-md-12 "
                                     style="padding-bottom: 10px;border-bottom: 1px dashed grey;">
                                </div>
                            </div>
                            <div class="col-md-12 "
                                 style="padding-bottom: 10px;border-bottom: 1px dashed grey;">
                            </div>
                            <div class="col-md-12">
                                <h6>GPIO buttons</h6>
                                <div class="col-md-12 "
                                     style="padding-bottom: 20px;border-bottom: 1px dashed grey;">
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-2">
                                    </div>
                                    <div class="col-md-10 ">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6 gpio-ui">

                                        </div>
                                        <div class="col-md-3"></div>

                                    </div>
                                </div>
                                <div class="col-md-12 "
                                     style="padding-bottom: 20px;border-bottom: 1px dashed grey;">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <h6>树莓派控制</h6>
                                <a class="bk-margin-5 btn btn-reboot btn-danger">重启树莓派</a>
                                <a class="bk-margin-5 btn btn-shutdown btn-danger">关机树莓派</a>
                                <div class="col-md-12 "
                                     style="padding-bottom: 20px;border-bottom: 1px dashed grey;">
                                </div>

                            </div>

                            <div class="col-md-12">
                                <h6>take picture</h6>
                                <a class="bk-margin-5 btn btn-image btn-success">On</a>
                                <div class="col-md-12 image-area">
                                </div>
                                <div class="col-md-12 "
                                     style="padding-bottom: 20px;border-bottom: 1px dashed grey;">
                                </div>
                            </div>


                            <div class="col-md-12">
                                <h6>camera <span class="status">controls</span></h6>
                                <a class="bk-margin-5 btn btn-on btn-record  btn-success">Record</a>
                                <input placeholder="time" class="time"/>

                            </div>
                            <div class="col-md-12 video-area">


                            </div>
                            <div class="col-md-12 "
                                 style="padding-bottom: 20px;border-bottom: 1px dashed grey;">
                            </div>
                        </div>


                    </div>


                </div>

            </div>

        </div>

    </div>

    <!-- End Main Page -->


    <!-- Usage -->


    <!-- End Usage -->


</div>

</div><!--/container-->


<!-- Modal Dialog -->

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title bk-fg-primary">Modal title</h4>

            </div>

            <div class="modal-body">

                <p class="bk-fg-danger">Here settings can be configured...</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save changes</button>

            </div>

        </div>

    </div>

</div><!-- End Modal Dialog -->


<div class="clearfix"></div>


<!-- start: JavaScript-->


<!-- Vendor JS-->

<script src="assets/vendor/js/jquery.min.js"></script>

<script src="assets/vendor/js/jquery-2.1.1.min.js"></script>

<script src="assets/vendor/js/jquery-migrate-1.2.1.min.js"></script>

<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="assets/vendor/skycons/js/skycons.js"></script>


<!-- Plugins JS-->

<script src="assets/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>

<script src="assets/plugins/moment/js/moment.min.js"></script>

<script src="assets/plugins/fullcalendar/js/fullcalendar.min.js"></script>


<!-- Theme JS -->

<script src="assets/js/jquery.mmenu.min.js"></script>

<script src="assets/js/core.min.js"></script>


<!-- Pages JS -->
<script>
    function init() {
        var gpio = [
            {
                number: 1,
                value: "+3V3"
            }
            ,
            {
                number: 2,
                value: "+5V"
            }
            ,
            {
                number: 3,
                value: "GPIO 2 /12C SDA"
            }
            ,
            {
                number: 4,
                value: "+5V"
            }
            ,
            {
                number: 5,
                value: "GPIO 3 /12C SCL"
            }
            ,
            {
                number: 6,
                value: "GND"
            }
            ,
            {
                number: 7,
                value: "GPIO 4"
            }
            ,
            {
                number: 8,
                value: "TXD0 / GPIO 14"
            }
            ,
            {
                number: 9,
                value: "GND"
            }
            ,
            {
                number: 10,
                value: "RXD0 / GPIO 15"
            }
            ,
            {
                number: 11,
                value: "GPIO 17"
            }
            ,
            {
                number: 12,
                value: "GPIO 18"
            }
            ,
            {
                number: 13,
                value: "GPIO 27"
            }
            ,
            {
                number: 14,
                value: "GND"
            }
            ,
            {
                number: 15,
                value: "GPIO 22"
            }
            ,
            {
                number: 16,
                value: "GPIO 23"
            }
            ,
            {
                number: 17,
                value: "+3v3"
            }
            ,
            {
                number: 18,
                value: "GPIO 24"
            }
            ,
            {
                number: 19,
                value: "GPIO 10 / SPI MOSI"
            }
            ,
            {
                number: 20,
                value: "GND"
            }
            ,
            {
                number: 21,
                value: "GPIO 9 / SPI MISO"
            }
            ,
            {
                number: 22,
                value: "GPIO 25"
            }
            ,
            {
                number: 23,
                value: "GPIO 11 / SPI SCLK"
            }
            ,
            {
                number: 24,
                value: "SPI CE0 / GPIO 8"
            }
            ,
            {
                number: 25,
                value: "GND"
            }
            ,
            {
                number: 26,
                value: "SPI CE1 / GPIO 7"
            }
            ,
            {
                number: 27,
                value: "GPIO 0 / ID_SD"
            }
            ,
            {
                number: 28,
                value: "ID_SC / GPIO 1"
            }
            ,
            {
                number: 29,
                value: "GPIO 5"
            }
            ,
            {
                number: 30,
                value: "GND"
            }
            ,
            {
                number: 31,
                value: "GPIO 6"
            }
            ,
            {
                number: 32,
                value: "GPIO 12"
            },
            {
                number: 33,
                value: "GPIO 13"
            }
            ,
            {
                number: 34,
                value: "GND"
            }
            ,
            {
                number: 35,
                value: "GPIO 19 / MISO"
            }
            ,
            {
                number: 36,
                value: "CE2# / GPIO 16"
            }
            ,
            {
                number: 37,
                value: "GPIO 26"
            }
            ,
            {
                number: 38,
                value: "MOSI / GPIO 20"
            }
            ,
            {
                number: 39,
                value: "GND"
            }
            ,
            {
                number: 40,
                value: "SCLK / GPIO 21"
            }
        ];
//gpio-ui
        for (var i = 0; i < 20; i++) {


            var index1 = ((2 * (i + 1)) - 1);
            var index2 = (2 * (i + 1));
            var title1 = "";
            var title2 = "";
            for (var j = 0; j < gpio.length; j++) {
                if (index1 == gpio[j].number) {
                    title1 = gpio[j].value;
                }
                if (index2 == gpio[j].number) {
                    title2 = gpio[j].value;
                }
            }
            var html = "<div class='col-md-12'>" +
                "<div class='col-md-4' >" +
                "<h6 class='title1'>" + title1 + "</h6>" +
                "</div>" +
                "<div class='col-md-2 ' >" +
                "<h6 class='index1' data-pin='"+index1+"'>" + index1 + "</h6>" +
                "</div>" +
                "<div class='col-md-2 ' >" +
                "<h6 class='index1' data-pin='"+index2+"'>" + index2 + "</h6>" +
                "</div>" +
                "<div class='col-md-4 '>" +
                "<h6 class='title2'>" + title2 + "</h6>" +
                "</div></div>";
            $(".gpio-ui").append(html);
        }




//os-info
        $.getJSON('/os', function (data) {
            console.log('os', data);
            if (data.success) {
                var osData = data.data;
                var html = "";
                for (var i = 0; i < osData.length; i++) {

                    html = "<h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + osData[i].name + ":" + osData[i].value + "</h6>";
                    $(".os-info").append(html);
                }
            }

        });
        $.getJSON('/images', function (data) {
            console.log('images', data);
            if (data.success) {
                var files = data.data;
                for (var i = 0; i < files.length; i++) {
                    var img = '<div style="width:600px;height:450px;float:left;margin: 50px;">' +
                        '<img style="width:100%;height:100%;" data-deg="0"  src="' + files[i] + '" />' +
                        '<a class="btn btn-success img-rotate ">旋转</a>'+
                        '<a class="btn btn-success img-download ">下载</a>'+
                        '<a class="btn btn-success img-del ">删除</a>'+
                        '</div>';
                    $(".image-area").append(img);

                }
                $(".image-area .img-rotate").click(function () {
                    var img = $(this).parent().find("img");
                    var deg = img.data("deg");
                    deg +=90;
                    if(deg==360){
                        deg=0;
                    }
                    img.data("deg",deg);
                    img.css({"transform": "rotate("+deg+"deg)"});
                });

                $(".image-area .img-download").click(function () {
                    var img = $(this).parent().find("img");
                    var src = img.attr("src");
                    window.open(src,"_new");
                });
                $(".image-area .img-del").click(function () {
                    var img = $(this).parent().find("img");
                    var src = img.attr("src");
                    if(confirm("确定要删除吗?")){
                        alert("删除");
                    }
                });

            }

        });
        $.getJSON('/videos', function (data) {
            console.log('videos', data);
            if (data.success) {
                var files = data.data;
                for (var i = 0; i < files.length; i++) {
                    var video = '<div style="width:600px;height:450px;float:left;margin: 50px;">' +
                                '<video controls="controls" style="width: 100%;height:100%;" data-deg="0" src="' + files[i] + '" "></video>'+
                                '<a class="btn btn-success video-rotate ">旋转</a>'+
                                '<a class="btn btn-success video-download ">下载</a>'+
                                '<a class="btn btn-success video-del ">删除</a>'+
                                '</div>';
                    $(".video-area").append(video);
                }
                $(".video-area .video-rotate").click(function () {
                    var video = $(this).parent().find("video");
                    var deg = video.data("deg");
                    deg +=90;
                    if(deg==360){
                        deg=0;
                    }
                    video.data("deg",deg);
                    video.css({"transform": "rotate("+deg+"deg)"});
                });

                $(".video-area .video-download").click(function () {
                    var video = $(this).parent().find("video");
                    var src = video.attr("src");
                    window.open(src,"_new");
                });
                $(".video-area .video-del").click(function () {
                    var video = $(this).parent().find("video");
                    var src = video.attr("src");
                    if(confirm("确定要删除吗?")){
                        alert("删除");
                    }
                });

            }
        });
    }

    $(function () {
        init();
        $('.btn-on').click(function () {
            $.get('/on');
            $(this).parent().find('.status').text('On');
        });
        $('.btn-off').click(function () {
            $.get('/off');
            $('.status').text('Off');
        });
        $(".btn-reboot").click(function (e) {
            if (confirm("确定要重启吗？")) {
                $(this).addClass("disabled");
                $.getJSON('/reboot', function (data) {

                });
                alert("已发送重启命令");
            }
        });
        $(".btn-shutdown").click(function (e) {
            if (confirm("确定要关机吗？")) {
                $(this).addClass("disabled");
                $.getJSON('/shutdown', function (data) {

                });
                alert("已发送关机命令");
            }
        });

        $(".btn-image").click(function (e) {
            $(this).addClass("disabled");

            $.getJSON('/image', function (data) {
                console.log('data', data);
                if (data.success) {
                    var img = '<img  style="width:600px;height:450px;float:left;" src="' + data.filename + '" />';
                    $(".image-area").append(img);
                }

            });
            $(this).removeClass("disabled");
        });

        $(".btn-record").click(function (e) {
            $(this).addClass("disabled");
            var time = $(".time").val();
            time = parseInt(time);
            if (time < -0) {
                alert("时间必须大于0");
                return;
            }
            $.getJSON('/camera?time=' + time, function (data) {
                console.log('data', data);
                if (data.success) {
                    var video = '<video controls="controls" style="width:600px;height:450px;float:left;" src="' + data.filename + '" "></video>';
                    $(".video-area").append(video);
                }

            });
            $(this).removeClass("disabled");
        });


    })
</script>
		
